<script setup lang="ts">
  import type { CategoryItem } from '@/types/home'
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { computed } from 'vue'

  onLoad(() => {
  })
  // 定义 props 接收数据
  defineProps<{
    list : CategoryItem[]
  }>()
  const role = ref(false)

  /**
   * 获取本地图
   * @param name // 文件名 如
   * @returns {*|string}
   */
  const getAssetsImages = computed(() => (name : string) => {

    const path = `/src/static/index/${name}.png`
    const modules = import.meta.glob('/src/static/index/*',{ eager: true })
    return modules[path].default
  })
</script>

<template>
  <view class="category">
    <navigator v-for="(item,index) in list" class="category-item" :key="index" hover-class="none" :url="item.url">
      <nut-badge>
        <image class="icon" :src="getAssetsImages(item.icon)"></image>
      </nut-badge>
      <text class="text">{{item.name}}</text>
    </navigator>

  </view>
</template>

<style lang="scss">
  @import '../styles/category.scss';
</style>
